ホームに戻る
出典 :
スタイルとテンプレート - WPF .NET | Microsoft Docs コントロールのスタイルを作成する方法 - WPF .NET | Microsoft Docs 第4回　WPFの「リソース、スタイル、テンプレート」を習得しよう：連載：WPF入門 - ＠IT [WPF] Styleでできることと書き方 - Qiita 【WPF】スタイルの共通化方法 - Qiita WPF デフォルトのスタイルの適用について | live-alone blog
関連 :
リソース テンプレート Tagプロパティ
目次 :

スタイルとは

一連のプロパティ値を複数の要素に適用するための機構。スタイルを用いることで、デザインに統一性を持たせることが容易となる。
リソースとして定義すると再利用が容易となるため、一般的にはこの形式で用いられる。
HTMLに対するCSSに類似する。

基本形

<Style TargetType="Button"> <Setter Property="Background" Value="DarkSeaGreen" /> <Setter Property="Foreground" Value="LightPink" /> <EventSetter Event="Click" Handler="DoSomething" /> </Style>
Style 要素の TargetType には、適用先の型名を指定する。
Setter 要素の Property 、Value には対象となるプロパティ名と設定する値を指定する。
この場合は Button 型が適用対象となり、Background 、Foreground がそれぞれ設定される。
また、EventSetter 要素を用いることでイベントおよび対応するハンドラを設定できる。
ここでは Click イベントに DoSomething() メソッドをハンドラとして割り付けている。

スタイルの記述

System.Windows.FrameworkElement 型の Style プロパティに値を設定することでも適用できるが、
リソースとして定義することで複数の要素に適用しやすくなる。
(XAML)
<StackPanel> <StackPanel.Resources> <!-- x:Key なしのスタイルを定義することで、 TargetType で指定した型すべてにスタイルを適用する --> <Style TargetType="Button"> <Setter Property="Background" Value="LightBlue" /> <Setter Property="Foreground" Value="Red" /> </Style> <!-- x:Key の明示 --> <Style x:Key="MyButtonStyle" TargetType="Button"> <Setter Property="Background" Value="DarkSeaGreen" /> <Setter Property="Foreground" Value="LightPink" /> </Style> </StackPanel.Resources> <!-- スタイルの自動適用 --> <Button Content="ボタン1" /> <!-- x:Key を指定して明示的にスタイルを適用 --> <Button Style="{StaticResource ResourceKey=MyButtonStyle}" Content="ボタン2" /> <!-- スタイルを直接記述 --> <Button Content="ボタン3"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Gray" /> </Style> </Button.Style> </Button> </StackPanel>
(表示)

解説
ここでは、StackPanel の Resource としてスタイルを定義している。
青地は TargetType のみを指定したスタイルで、原則として StackPanel に含まれるすべての Button に適用される(デフォルトスタイル)。
緑地は TargetType に加えて x:Key を指定しており、「ボタン2」は x:Key を指定することで、適用するスタイルを選択している。
「ボタン3」は Button.Style を直接記述している。この場合、親要素( StackPanel )に対して指定されたスタイルは無視される。

スタイルの適用除外

Style={x:Null} とすることで、そのコントロールをスタイル自動適用の対象外とすることができる。
(XAML)
<StackPanel> <StackPanel.Resources> <!-- 自動適用(デフォルト)スタイルの定義 --> <Style TargetType="Button"> <Setter Property="Background" Value="LightBlue" /> <Setter Property="Foreground" Value="Red" /> </Style> <Button Content="ボタン1" /> <Button Content="ボタン2" Style={x:Null}/> <Button Content="ボタン3" /> </StackPanel>
スタイルの指定を行っていない「ボタン1」、「ボタン3」にはデフォルトスタイル(青地)が適用されるが、Style={x:Null} を指定した「ボタン2」にはデフォルトスタイルが適用されない。

スタイルの継承

スタイルは BasedOn プロパティを指定することで、他のスタイルを継承できる。
これにより、スタイルの部分的な変更が可能。
(XAML)
<StackPanel Width="90"> <StackPanel.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="LightBlue" /> <Setter Property="Foreground" Value="Red" /> </Style> <!-- デフォルトスタイルを基に、新たにスタイルを作成 --> <Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource ResourceKey={x:Type Button}}"> <Setter Property="FontSize" Value="20" /> </Style> </StackPanel.Resources> <!-- x:Key を指定していないため、デフォルトスタイルが適用される --> <Button Content="ボタン1" /> <!-- MyButtonStyle を適用 --> <Button Style="{StaticResource ResourceKey=MyButtonStyle}" Content="ボタン2" /> </StackPanel>
(表示)

トリガー

特定の条件下でのみスタイルを適用したい場合、その条件をトリガー( Style.Trigger )として指定することができる。
例えば、マウスオーバー時やクリック時にボタンスタイルを変更する、といったことが可能である。
<StackPanel Width="60"> <StackPanel.Resources> <Style TargetType="TextBox"> <Setter Property="Background" Value="LightGray" /> <!-- トリガー条件の指定 --> <Style.Triggers> <!-- トリガー : マウスオーバー時 --> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="LightBlue" /> </Trigger> <!-- トリガー : フォーカス時 --> <Trigger Property="IsFocused" Value="True"> <Setter Property="Background" Value="LightPink" /> </Trigger> </Style.Triggers> </Style> </StackPanel.Resources> <TextBox Text="テキスト" /> </StackPanel>
上記の例では、マウスオーバー時に背景が薄青、フォーカス時に薄ピンクとなるテキストボックスが得られる。

注意が必要な点 : Window へのスタイル適用

Window に対して、スタイルを定義した外部リソースを適用する際は注意が必要となる。
詳細はリンク先を参照のこと。